<template>
	<view>
		<view class="telly-item"  @click="selectClick">
			<view style="-webkit-flex: 1;flex: 1;"></view>
			<view v-if="selectInfo.length > 0" :style="styles" >
				<text class="valueT" v-for="(item,index) in selectInfo" :key="index" v-if="item[rangekey[index]]">
					{{item[rangekey[index]]}}
				</text>
			</view>
			<view v-else :style="placeholderStyle">{{placeholderText}} </view>
			<view class="" style="margin-top: auto;margin-bottom: auto;">
				<uni-icons type="right"></uni-icons>
			</view>
		</view>
		<uni-popup :isMaskClick="isMaskClick" ref="popupPicker" type="bottom">
			<view class="popupClass" >
				<view class="btnClass" >
					<text :style="cancelStyle" @click="cancel">{{cancelText}}</text>
					<view style="-webkit-flex: 1;flex: 1;"></view>
					<text :style="confirmStyle" @click="confirm">{{confirmText}}</text>
				</view>
				<picker-view v-if="pickershow" indicator-style="height: 50px;" :value="value" 
					:immediate-change = "immediate_change"
					:indicator-style = "indicator_style"
					:indicator-class = "indicator_class"
					:mask-style = "mask_style"
					:mask-class = "mask_class"
					
					@change = "bindChange"
					@pickstart = "pickstart" 
					@pickend = "pickend">
					<picker-view-column v-for="(itemList,indexList) in range" :key="indexList">
						<view class="item" v-for="(item,index) in itemList" :key="index"
							v-if="item[rangekey[indexList]]">{{item[rangekey[indexList]]}}</view>
					</picker-view-column>
				</picker-view>
				<!-- #ifndef H5 -->
				<!-- <view class="uni-flex uni-row" style="padding: 10px;">
					<view style="-webkit-flex: 1;flex: 1;"></view>
					<button type="default" style="font-size: 30rpx;color: #55aa7f;padding: 0rpx 20rpx;width: 300rpx;margin-right: 20rpx;" @click="cancel">{{cancelText}}</button>
					<button type="primary" style="font-size: 30rpx;background-color: #55aa7f;color: #fff;padding: 0rpx 20rpx;width: 300rpx;margin-left: 20rpx;" @click="confirm">{{confirmText}}</button>
					<view style="-webkit-flex: 1;flex: 1;"></view>
				</view> -->
				<!-- #endif -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "telly-picker",
		props: {
			range: { //数据
				type: Array,
				default: []
			},
			rangekey: { //要显示的字段
				type: Array
			},
			value: { //初始要显示的字段的索引
				type: Array,
				default: [0]
			},
			styles: { //选择后 展示数据的样式
				type: String,
				default: "color: #000000;"
			},
			placeholderText:'',
			// placeholderText: { //未选择时 提示文本
			// 	type: String,
			// 	default: "请选择"
			// },
			placeholderStyle: { //未选择时 提示文本样式
				type: String,
				default: "color: #000000;"
			},
			confirmStyle: { //确认按钮样式
				type: String,
				default: "color: #55aa7f;"
			},
			cancelStyle: { //取消按钮样式
				type: String,
				default: "color: #909497;"
			},
			confirmText: { //确认按钮文字
				type: String,
				default: "确定"
			},
			cancelText: { //取消按钮文字
				type: String,
				default: "取消"
			},
			isMaskClick: { //点击蒙版是否关闭
				type: Boolean,
				default: true
			},
			pickershow: { //是否展示数据
				type: Boolean,
				default: true
			},
			disabled: { //是否可用
				type: Boolean,
				default: false
			},
			immediate_change:{ //是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件。 微信小程序 2.21.1
				type: Boolean,
				default: false
			},
			indicator_style:{ //设置选择器中间选中框的样式
				type: String,
			},
			indicator_class:{ //设置选择器中间选中框的类名，注意页面或组件的style中写了scoped时，需要在类名前写/deep/    app-nvue与字节跳动小程序与飞书小程序不支持
				type: String,
			},
			mask_style:{ //设置蒙层的样式 
				type: String,
			},
			mask_class:{ //设置蒙层的类名   app-nvue与字节跳动小程序与飞书小程序不支持
				type: String,
			},
			
			
		},
		data() {
			return {
				selectInfo: [],
				display: false,
				indexs: [],
			};
		},
		watch: {
			range() {},
			value(e) {
				this.indexs = e;
				var info = [];
				this.selectInfo = [];
				for (var i = 0; i < this.indexs.length; i++) {
					info.push(this.range[i][this.indexs[i]]);
				}
				this.selectInfo = info;
			},
			placeholderText() {}
		},
		created() {
			this.indexs = this.value;
		},
		methods: {
			//点击事件弹出选择框
			selectClick() {
				if (this.disabled) return;
				this.$refs.popupPicker.open()
			},
			//取消按钮点击事件
			cancel() {
				this.$emit('cancel')
				this.$refs.popupPicker.close()
			},
			//确认按钮点击事件
			confirm(e) {
				var info = [];
				this.selectInfo = [];
				for (var i = 0; i < this.indexs.length; i++) {
					info.push(this.range[i][this.indexs[i]]);
				}
				this.selectInfo = info;
				
				this.$emit('confirm', this.selectInfo)
				this.$refs.popupPicker.close()
			},
			//选中框内容滚动 事件  e=[]
			bindChange(e) {
				this.$emit('bindChange', e);
				this.indexs = e.detail.value;
			},
			// 当滚动选择结束时候触发事件  微信小程序2.3.1、快手小程序
			pickstart(e) {
				this.$emit('pickstart');
			},
			// 当滚动选择结束时候触发事件  微信小程序2.3.1、快手小程序
			pickend(e) {
				this.$emit('pickend');
			} 
		}
	}
</script>

<style>
	picker-view {
		width: 100%;
		height: 600rpx;
		margin-top: 20rpx;
	} 
	.item {
		line-height: 100rpx;
		text-align: center;
	} 
	.valueT {
		margin: 0rpx 10rpx;
	}
	.popupClass{
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
	}
	.btnClass{
		padding: 30px;
		display: flex; 
		flex-direction: row;
	}
	.telly-item {
		display: flex;
		flex-direction: row;
		width: 100%;
		text-align: right;
		 
		/* border: 1rpx solid #909497;
		border-radius: 20rpx; */
		
		padding: 10rpx;
		font-size: 30rpx; 
	}
</style>
